<template>
	<el-container class="home-container">
		<!-- 左侧菜单栏 -->
		<el-aside width="200px" style="background-color: #304156;">
			<div class="aside-title" @click="homeClick" style="cursor: pointer;">
				<img src="../../assets/logo1.jpg" class="sidebar-logo"/>
				<span>儿童摄影管理系统</span>
			</div>
			<Menu :menuList="menuList" :isCollapse="isCollapse"></Menu>
		</el-aside>
		<!--  -->
		<el-container>
			<!-- 右侧头部用户信息 -->
			<el-header style="height: 50px">
        <div class="header-block">
          <div class="pc-title">
			  <div class="header-icon">
			    <span>
			      <i
			        :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
			        @click="isCollapse = !isCollapse"
			      ></i>
			    </span>
			  </div>
		  </div>
          <div class="header-pic">
            <div class="right-block">
              <el-dropdown trigger="click">
                <div class="icon-name">
                  <img
                    v-if="userInfo.headUrl"
                    :src="userInfo.headUrl"
                  />
                  <img
                    v-else
                    src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                  />
                </div>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    icon="el-icon-my-theme"
                    @click.native="themeDrawer = true"
                  >
                    <span>更换主题</span>
                  </el-dropdown-item>
                  <el-dropdown-item
                    icon="el-icon-user"
                    @click.native="goProfileClick"
                  >
                    <span>个人中心</span>
                  </el-dropdown-item>
                  <el-dropdown-item
                    icon="el-icon-right"
                    @click.native="logoutClick"
                  >
                    <span>退出登录</span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </div>
      </el-header>
<!-- 右侧内容区域 -->
			<el-main class="custom-loading">
				 <!-- <el-button @click="isCollapse =!isCollapse"></el-button>  -->
				<div class="main-block">
					<keep-alive>
						<transition name="fade">
							<router-view v-if="$route.meta.keepAlive" class="view"
								@getInfoMethod="getInfoMethod">
							</router-view>
						</transition>
					</keep-alive>

					<transition name="fade">
						<router-view v-if="!$route.meta.keepAlive"
							@getInfoMethod="getInfoMethod" />
					</transition>
				</div>

				<!-- 主题抽屉 -->
				<el-drawer :visible.sync="themeDrawer" :size="230" :show-close="false">
					<div class="drawer-content">
						<div class="theme-block">
							<div class="theme-text">主题颜色</div>
							<div class="theme-choose">
								<custom-theme @change="styleChange"></custom-theme>
							</div>
						</div>
						<el-divider></el-divider>
					</div>
				</el-drawer>
			</el-main>
			<!-- <el-footer>Footer</el-footer> -->
		</el-container>
	</el-container>
</template>

<script>
	import router from "../../router/index.js"
	import routerUtil from "../../router/routerUtil.js"
	export default {
		mounted() {
			this.initUserPermission();
			this.getInfoMethod();
		},
		data() {
			return {
				themeDrawer: false,
				isCollapse: false,
				passDialog: false,
				passForm: {
					oldPassword: "",
					newPassword: "",
					newAPassword: "",
				},
			};
		},
		computed: {
			menuList: function() {
				return this.$store.state.sys.menuList
			},
			userInfo: function() {
				return this.$store.state.sys.userInfo
			}
		},
		watch: {
			passDialog() {
				if (!this.passDialog) {
					this.$refs.passForm.resetFields();
				}
			},
		},

		methods: {
			styleChange(val) {
				localStorage.setItem("theme", val);
			},
			async getInfoMethod() {
				const result = await this.$api.sysUserFindProfile();
				this.$store.commit('updateUserInfo', result);
			},
			async initUserPermission() {
				const result = await this.$api.sysMenuFindAllPerByUserId();
				sessionStorage.setItem("permission_button", result);
			},
			//密码提交修改
			passSubmitClick() {
				this.$confirm("确定修改密码?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning",
					})
					.then(async () => {
						await this.$api.sysUserEditPassword(this.passForm);
						this.$notify({
							title: "提示",
							message: "修改成功,3s后退出登录",
							type: "success",
						});
						localStorage.clear();
						sessionStorage.clear();
						setTimeout(() => {
							this.$router.replace("/login");
						}, 3000);
					})
					.catch(() => {});
			},
			async logoutClick() {
				await this.$api.logout();
				localStorage.clear();
				sessionStorage.clear();
				//跳转登录页
				this.$router.replace("/login");
			},
			homeClick() {
				this.$router.push("/index");
			},
			//个人中心
			goProfileClick() {
				this.$router.push("/index");
			},
		},
	};
</script>

<style lang="scss" scoped>
	.home-container {
		height: 100%;
		background-color: #304156;

		.el-header {
			height: 50px;
			background-color: #ffffff;

			.header-block {
				display: flex;
				justify-content: space-between;
				height: 100%;

				.pc-title {
					display: flex;
					align-items: center;

					.header-icon {
						width: 30px;
						text-align: center;
						font-size: 30px;
						line-height: 30px;
						color: #304156;
						cursor: pointer;
					}
				}

				.header-pic {
					display: flex;
					height: 100%;

					.right-block {
						display: flex;
						height: 100%;
						overflow: hidden;

						.icon-name {
							height: 40px;
							width: 40px;
							margin: 5px;
							background-color: black;
							border-radius: 10px;
							cursor: pointer;

							>img {
								height: 100%;
								width: 100%;
								border-radius: 10px;
							}

							>span {
								display: block;
								font-weight: 600;
								text-align: center;
								line-height: 60px;
								color: #ffffff;
							}
						}
					}
				}
			}
		}

		.el-aside {
			background-color: #ffffff;
			color: #409eff;
			text-align: left;
			line-height: 200px;
			overflow: hidden;
			overflow-x: hidden;

			.aside-title {
				height: 50px;
				line-height: 50px;
				width: 100%;
				text-align: center;
				align-items: center;

				>span {
					line-height: 50px;
					font-size: 14px;
					font-weight: 1000;
					color: #ffffff;
				}
			}
		}

		.el-main {
			background-color: #e9eef3;
			color: #333;
			overflow-y: auto;
			padding: unset;

			.main-block {}

			.main-header {
				height: 30px;
				background-color: #fff;
				padding: 0 5px;

				.header-icon {
					width: 35px;
					text-align: center;
					font-size: 25px;
					line-height: 30px;
					cursor: pointer;
				}
			}
		}
	}

	.fade-enter,
	.fade-leave-active {
		opacity: 0;
		-webkit-transform: translate(30px, 0);
		transform: translate(30px, 0);
	}

	.fade-leave-active,
	.fade-enter-active {
		opacity: 0;
		-webkit-transform: translate(-30px, 0);
		transform: translate(-30px, 0);
	}

	.theme-block {
		display: flex;
		overflow: hidden;
		justify-content: space-between;

		.theme-text {
			line-height: 32px;
			margin-right: 20px;
			color: #909399;
			font-size: 15px;
		}

		.theme-choose {}
	}

	.sidebar-logo {
		width: 32px;
		height: 32px;
		vertical-align: middle;
		margin-right: 6px;
	}
</style>
